<template>
  <div class="content-box">
    <div class="top-box">
      <div class="tab-box flex ac jb">
        <el-tabs v-model="activeName" @tab-click="scrollTo">
          <el-tab-pane label="基础信息" name="1" v-if="$fieldShowFunc('12-jcxx')"></el-tab-pane>
          <el-tab-pane label="人员信息" name="2" v-if="$fieldShowFunc('12-ryxx')"></el-tab-pane>
          <el-tab-pane label="客户信息" name="3" v-if="$fieldShowFunc('12-khxx')"></el-tab-pane>
          <el-tab-pane label="报价信息" name="4" v-if="$fieldShowFunc('12-bjxx')"></el-tab-pane>
          <el-tab-pane label="合同信息" name="5" v-if="$fieldShowFunc('12-htxx')"></el-tab-pane>
          <el-tab-pane label="施工信息" name="6" v-if="$fieldShowFunc('12-sgxx')"></el-tab-pane>
          <el-tab-pane label="结算信息" name="7" v-if="$fieldShowFunc('12-jsxx')"></el-tab-pane>
          <el-tab-pane label="售后信息" name="8" v-if="$fieldShowFunc('12-shxx')"></el-tab-pane>
        </el-tabs>
        <el-button class="his-btn" @click="projectHisFunc" v-if="$isPer(permission, ['his_log'])"
          size="small">历史记录</el-button>
      </div>
    </div>
    <div class="scroll-view-box">
      <div class="data-box-left" v-if="dataObj">

        <div class="user-title-box" ref="1" v-if="$fieldShowFunc('12-jcxx')">基础信息</div>
        <el-descriptions class="margin-bottom" :column="3" border>
          <el-descriptions-item label="项目名称" v-if="$fieldShowFunc('xm_xmmc')">
            <div class="justify_8" slot="label">项目名称</div>
            {{ dataObj.basic_information.project_name || '--' }}
          </el-descriptions-item>
          <el-descriptions-item label="项目编号" v-if="$fieldShowFunc('xm_xmbh')">
            <div class="justify_8" slot="label">项目编号</div>
            {{ dataObj.basic_information.project_number || '--' }}
          </el-descriptions-item>
          <el-descriptions-item label="项目品牌" v-if="$fieldShowFunc('xm_xmpp')">
            <div class="justify_8" slot="label">项目品牌</div>
            {{ dataObj.basic_information.brand_name || '--' }}
          </el-descriptions-item>
          <el-descriptions-item label="项目类型" v-if="$fieldShowFunc('xm_xmlx')">
            <div class="justify_8" slot="label">项目类型</div>
            {{ dataObj.basic_information.store_type_name || '--' }}
          </el-descriptions-item>
          <el-descriptions-item label="勘场类型" v-if="$fieldShowFunc('xm_kclx')">
            <div class="justify_8" slot="label">勘场类型</div>
            <span v-if="dataObj.basic_information.survey_site == 1">无需勘场</span>
            <span v-if="dataObj.basic_information.survey_site == 2">实地勘场</span>
            <span v-if="dataObj.basic_information.survey_site == 3">勘场出图</span>
          </el-descriptions-item>
          <el-descriptions-item label="项目面积" v-if="$fieldShowFunc('xm_xmmj')">
            <div class="justify_8" slot="label">项目面积</div>
            {{ dataObj.basic_information.building_area ? dataObj.basic_information.building_area + '㎡' : '--' }}
          </el-descriptions-item>
          <el-descriptions-item label="项目进度" v-if="$fieldShowFunc('xm_xmjd')">
            <div class="justify_8" slot="label">项目进度</div>
            <span v-if="dataObj.basic_information.display_status == 10">项目待启动</span>
            <span v-if="dataObj.basic_information.display_status == 15">待勘场</span>
            <span v-if="dataObj.basic_information.display_status == 18">待勘场出图</span>
            <span v-if="dataObj.basic_information.display_status == 20">待方案设计</span>
            <span v-if="dataObj.basic_information.display_status == 25">待报价</span>
            <span v-if="dataObj.basic_information.display_status == 30">洽谈中</span>
            <span v-if="dataObj.basic_information.display_status == 40">已签约</span>
            <span v-if="dataObj.basic_information.display_status == 42">施工待启动</span>
            <span v-if="dataObj.basic_information.display_status == 45">施工中</span>
            <span v-if="dataObj.basic_information.display_status == 50">已完工</span>
            <span v-if="dataObj.basic_information.display_status == 55">待结算</span>
            <span v-if="dataObj.basic_information.display_status == 60">款项付清</span>
            <span v-if="dataObj.basic_information.display_status == 70">已取消</span>
          </el-descriptions-item>
          <el-descriptions-item label="省市区" v-if="$fieldShowFunc('xm_xmssq')">
            <div class="justify_8" slot="label">省市区</div>
            {{ dataObj.basic_information.area || '--' }}
          </el-descriptions-item>
          <el-descriptions-item label="详细地址" v-if="$fieldShowFunc('xm_xxdz')">
            <div class="justify_8" slot="label">详细地址</div>
            {{ dataObj.basic_information.address || '--' }}
          </el-descriptions-item>
          <el-descriptions-item label="项目创建时间" v-if="$fieldShowFunc('xm_xmcjsj')">
            <div class="justify_8" slot="label">项目创建时间</div>
            {{ dataObj.basic_information.created_at || '--' }}
          </el-descriptions-item>
          <el-descriptions-item label="最新沟通进度" v-if="$fieldShowFunc('xm_zxgtjd')">
            <div class="justify_8" slot="label">最新沟通进度</div>
            {{ dataObj.basic_information.latest_communication_progress || '--' }}
          </el-descriptions-item>
          <el-descriptions-item label="综合平均评分" v-if="$fieldShowFunc('xm_zhpjpf')">
            <div class="justify_8" slot="label">综合平均评分</div>
            {{ dataObj.basic_information.overall_rating ? dataObj.basic_information.overall_rating + '分' : '--' }}
          </el-descriptions-item>
          <el-descriptions-item label="取消日期" v-if="$fieldShowFunc('xm_qxrq')">
            <div class="justify_8" slot="label">取消日期</div>
            {{ dataObj.basic_information.cancel_at || '--' }}
          </el-descriptions-item>
          <el-descriptions-item label="取消类型" v-if="$fieldShowFunc('xm_qxlx')">
            <div class="justify_8" slot="label">取消类型</div>
            <span v-if="dataObj.basic_information.cancel_type == 1">价格原因</span>
            <span v-if="dataObj.basic_information.cancel_type == 2">工期原因</span>
            <span v-if="dataObj.basic_information.cancel_type == 3">客户拒绝沟通</span>
            <span v-if="dataObj.basic_information.cancel_type == 4">客户自行施工</span>
            <span v-if="dataObj.basic_information.cancel_type == 5">不可抗力因素</span>
            <span v-if="dataObj.basic_information.cancel_type == 6">前施工问题影响</span>
            <span v-if="dataObj.basic_information.cancel_type == 7">客户失联</span>
            <span v-if="dataObj.basic_information.cancel_type == 8">其他原因</span>
            <span v-if="dataObj.basic_information.cancel_type == 0">--</span>
            <span v-if="!dataObj.basic_information.cancel_type">--</span>
          </el-descriptions-item>
          <el-descriptions-item label="当前节点" v-if="$fieldShowFunc('xm_dqjd')">
            <div class="justify_8" slot="label">当前节点</div>
            {{ dataObj.basic_information.current_node || '--' }}
          </el-descriptions-item>
          <el-descriptions-item label="取消原因描述" v-if="$fieldShowFunc('xm_qxyyms')">
            <div class="justify_8" slot="label">取消原因描述</div>
            {{ dataObj.basic_information.cancel_reason || '--' }}
          </el-descriptions-item>
          <el-descriptions-item labelClassName="descriptions_opacity" contentClassName="descriptions_opacity"
            v-for="key in $fieldRowFunc(0, 1, 0)" :key="key"></el-descriptions-item>
        </el-descriptions>

        <div class="user-title-box" ref="2" v-if="$fieldShowFunc('12-ryxx')">人员信息</div>
        <el-descriptions class="margin-bottom" :column="3" border>
          <el-descriptions-item label="品牌经理" v-if="$fieldShowFunc('xm_ppjl')">
            <div class="justify_8" slot="label">品牌经理</div>
            {{ dataObj.personnel.channel_manager_name || '--' }}
          </el-descriptions-item>
          <el-descriptions-item label="客户经理" v-if="$fieldShowFunc('xm_khjl')">
            <div class="justify_8" slot="label">客户经理</div>
            {{ dataObj.personnel.account_manager_name || '--' }}
          </el-descriptions-item>
          <el-descriptions-item label="勘场工程经理" v-if="$fieldShowFunc('xm_kcgcjl')">
            <div class="justify_8" slot="label">勘场工程经理</div>
            {{ dataObj.personnel.site_surveyors_name || '--' }}
          </el-descriptions-item>
          <el-descriptions-item label="施工工程经理" v-if="$fieldShowFunc('xm_sggcjl')">
            <div class="justify_8" slot="label">施工工程经理</div>
            {{ dataObj.personnel.engineering_manager_name || '--' }}
          </el-descriptions-item>
          <el-descriptions-item label="施工工长" v-if="$fieldShowFunc('xm_sggz')">
            <div class="justify_8" slot="label">施工工长</div>
            {{ dataObj.personnel.foreman_name || '--' }}
          </el-descriptions-item>
          <el-descriptions-item label="工程监理" v-if="$fieldShowFunc('xm_gcjl')">
            <div class="justify_8" slot="label">工程监理</div>
            {{ dataObj.personnel.engineering_supervision_name || '--' }}
          </el-descriptions-item>
          <el-descriptions-item labelClassName="descriptions_opacity" contentClassName="descriptions_opacity"
            v-for="key in $fieldRowFunc(0, 1, 1)" :key="key"></el-descriptions-item>
        </el-descriptions>

        <div class="user-title-box" ref="3" v-if="$fieldShowFunc('12-khxx')">客户信息</div>
        <el-descriptions class="margin-bottom" :column="3" border>
          <el-descriptions-item label="会员编号" v-if="$fieldShowFunc('xm_hybh')">
            <div class="justify_8" slot="label">会员编号</div>
            <span v-if="$isPer(permission, ['projectDetail_khDetail'])" class="click-color"
              @click="customerFunc(dataObj.customer.user_id)">{{ dataObj.customer.member_id || '--' }}</span>
            <span v-else>{{ dataObj.customer.member_id || '--' }}</span>
          </el-descriptions-item>
          <el-descriptions-item label="客户类型" v-if="$fieldShowFunc('xm_khlx')">
            <div class="justify_8" slot="label">客户类型</div>
            <span v-if="dataObj.customer.customer_type == 0">--</span>
            <span v-if="dataObj.customer.customer_type == 1">VIP客户</span>
            <span v-if="dataObj.customer.customer_type == 2">优质客户</span>
            <span v-if="dataObj.customer.customer_type == 3">普通老客户</span>
            <span v-if="dataObj.customer.customer_type == 4">优质新客户</span>
            <span v-if="dataObj.customer.customer_type == 5">普通新客户</span>
          </el-descriptions-item>
          <el-descriptions-item label="客户名称" v-if="$fieldShowFunc('xm_khmc')">
            <div class="justify_8" slot="label">客户名称</div>
            {{ dataObj.customer.name || '--' }}
          </el-descriptions-item>
          <el-descriptions-item label="联系方式" v-if="$fieldShowFunc('xm_lxfs')">
            <div class="justify_8" slot="label">联系方式</div>
            {{ dataObj.customer.phone || '--' }}
          </el-descriptions-item>
          <el-descriptions-item labelClassName="descriptions_opacity" contentClassName="descriptions_opacity"
            v-for="key in $fieldRowFunc(0, 1, 2)" :key="key"></el-descriptions-item>
        </el-descriptions>

        <div class="user-title-box" ref="4" v-if="$fieldShowFunc('12-bjxx')">报价信息
        </div>
        <el-descriptions style="margin-bottom: 20px;" :column="3" border>
          <el-descriptions-item label="报价编号" v-if="$fieldShowFunc('xm_bjbh')">
            <div class="justify_8" slot="label">报价编号</div>
            <span :class="dataObj.quotation.quotation_number ? 'click-color' : ''" @click="quotationFunc">{{
              dataObj.quotation.quotation_number
              || '--' }}</span>
          </el-descriptions-item>
          <el-descriptions-item label="首次对客报价时间" v-if="$fieldShowFunc('xm_scdkbjsj')">
            <div class="justify_8" slot="label">首次对客报价时间</div>
            {{ dataObj.quotation.first_quotation_date || '--' }}
          </el-descriptions-item>
          <el-descriptions-item label="最终对客报价时间" v-if="$fieldShowFunc('xm_zzdkbjsj')">
            <div class="justify_8" slot="label">最终对客报价时间</div>
            {{ dataObj.quotation.last_quotation_date || '--' }}
          </el-descriptions-item>
          <el-descriptions-item label="对客报价时间" v-if="$fieldShowFunc('xm_dkbjsj')">
            <div class="justify_8" slot="label">对客报价时间</div>
            {{ dataObj.quotation.to_customer_quotation_date || '--' }}
          </el-descriptions-item>
          <el-descriptions-item label="首次报价金额" v-if="$fieldShowFunc('xm_scbjje')">
            <div class="justify_8" slot="label">首次报价金额</div>
            {{ dataObj.quotation.first_quotation_amount + '' ? dataObj.quotation.first_quotation_amount + '元' : '--' }}
          </el-descriptions-item>
          <el-descriptions-item label="最终报价金额" v-if="$fieldShowFunc('xm_zzbjje')">
            <div class="justify_8" slot="label">最终报价金额</div>
            {{ dataObj.quotation.last_quotation_amount + '' ? dataObj.quotation.last_quotation_amount + '元' : '--' }}
          </el-descriptions-item>
          <el-descriptions-item label="增减项金额" v-if="$fieldShowFunc('xm_zjxje')">
            <div class="justify_8" slot="label">增减项金额</div>
            {{ dataObj.quotation.change_amount + '' ? dataObj.quotation.change_amount + '元' : '--' }}
          </el-descriptions-item>
          <el-descriptions-item label="增减项已完成" v-if="$fieldShowFunc('xm_zjxywc')">
            <div class="justify_8" slot="label">增减项已完成</div>
            <span v-if="$isPer(permission, ['projectDetail_zjxList'])"
              :class="dataObj.quotation.change_items_completed_num ? 'click-color' : ''" @click="changeItemFunc">{{
                dataObj.quotation.change_items_completed_num }}项</span>
            <span v-else>{{ dataObj.quotation.change_items_completed_num }}项</span>
          </el-descriptions-item>
          <el-descriptions-item label="增减项未完成" v-if="$fieldShowFunc('xm_zjxwwc')">
            <div class="justify_8" slot="label">增减项未完成</div>
            <span v-if="$isPer(permission, ['projectDetail_zjxList'])"
              :class="dataObj.quotation.change_items_incomplete_num ? 'click-color' : ''" @click="changeItemFunc">
              {{ dataObj.quotation.change_items_incomplete_num }}项</span>
            <span v-else>{{ dataObj.quotation.change_items_incomplete_num }}项</span>
          </el-descriptions-item>
          <el-descriptions-item labelClassName="descriptions_opacity" contentClassName="descriptions_opacity"
            v-for="key in $fieldRowFunc(0, 1, 3)" :key="key"></el-descriptions-item>
        </el-descriptions>
        <div class="user-title-box2 flex ac" @click="showImg = !showImg" v-if="$fieldShowFunc('12-sjtz')">设计图纸
          <i :class="showImg ? 'el-icon-arrow-up i-icon' : 'el-icon-arrow-down i-icon'"></i>
        </div>
        <el-descriptions v-if="showImg" class="margin-bottom" :column="3" border>
          <el-descriptions-item label="平面图文件" v-if="$fieldShowFunc('xm_pmtwj')">
            <div class="justify_8" slot="label">平面图文件</div>
            <div class="file-box-img-box flex ac">
              <div class="file-box-img" v-for="(item, index) in dataObj.quotation.design_drawings.plan_drawing"
                :key="index">
                <el-tooltip class="item" effect="dark" :content="item.file_name" placement="top">
                  <img class="img" :src="$fileImgFunc(item)" @click="$fileViewHandle(item)" />
                </el-tooltip>
              </div>
            </div>
            <span v-if="!dataObj.quotation.design_drawings.plan_drawing.length">--</span>
          </el-descriptions-item>
          <el-descriptions-item label="效果图文件" v-if="$fieldShowFunc('xm_xgtwj')">
            <div class="justify_8" slot="label">效果图文件</div>
            <div class="file-box-img-box flex ac">
              <div class="file-box-img" v-for="(item, index) in dataObj.quotation.design_drawings.effect_drawing"
                :key="index">
                <el-tooltip class="item" effect="dark" :content="item.file_name" placement="top">
                  <img class="img" :src="$fileImgFunc(item)" @click="$fileViewHandle(item)" />
                </el-tooltip>
              </div>
            </div>
            <span v-if="!dataObj.quotation.design_drawings.effect_drawing.length">--</span>
          </el-descriptions-item>
          <el-descriptions-item label="施工图文件" v-if="$fieldShowFunc('xm_sgtwj')">
            <div class="justify_8" slot="label">施工图文件</div>
            <div class="file-box-img-box flex ac">
              <div class="file-box-img" v-for="(item, index) in dataObj.quotation.design_drawings.construction_drawing"
                :key="index">
                <el-tooltip class="item" effect="dark" :content="item.file_name" placement="top">
                  <img class="img" :src="$fileImgFunc(item)" @click="$fileViewHandle(item)" />
                </el-tooltip>
              </div>
            </div>
            <span v-if="!dataObj.quotation.design_drawings.construction_drawing.length">--</span>
          </el-descriptions-item>
          <el-descriptions-item label="其他文件" v-if="$fieldShowFunc('xm_qtwj')">
            <div class="justify_8" slot="label">其他文件</div>
            <div class="file-box-img-box flex ac">
              <div class="file-box-img" v-for="(item, index) in dataObj.quotation.design_drawings.other_file"
                :key="index">
                <el-tooltip class="item" effect="dark" :content="item.file_name" placement="top">
                  <img class="img" :src="$fileImgFunc(item)" @click="$fileViewHandle(item)" />
                </el-tooltip>
              </div>
            </div>
            <span v-if="!dataObj.quotation.design_drawings.other_file.length">--</span>
          </el-descriptions-item>
          <el-descriptions-item labelClassName="descriptions_opacity" contentClassName="descriptions_opacity"
            v-for="key in $fieldRowFunc(0, 1, 4)" :key="key"></el-descriptions-item>
        </el-descriptions>

        <div class="user-title-box" ref="5" v-if="$fieldShowFunc('12-htxx')">合同信息
          <el-button class="blue-btn" @click="addContractFunc"
            v-if="!dataObj.contract.contract_number && $isPer(permission, ['projectDetail_Cjht'])">创建合同</el-button>
        </div>
        <el-descriptions class="margin-bottom" :column="3" border>
          <el-descriptions-item label="合同编号" v-if="$fieldShowFunc('xm_htbh')">
            <div class="justify_8" slot="label">合同编号</div>
            <span @click="contractFunc(dataObj.contract.contract_id)"
              :class="dataObj.contract.contract_number ? 'click-color' : ''">{{ dataObj.contract.contract_number
                ||
                '--' }}</span>
          </el-descriptions-item>
          <el-descriptions-item label="合同状态" v-if="$fieldShowFunc('xm_htzt')">
            <div class="justify_8" slot="label">合同状态</div>
            {{ dataObj.contract.contract_status ? dataObj.contract.contract_status == 1 ? '已签约' : '已作废' : '--' }}
          </el-descriptions-item>
          <el-descriptions-item label="合同开工日期" v-if="$fieldShowFunc('xm_htkgrq')">
            <div class="justify_8" slot="label">合同开工日期</div>
            {{ dataObj.contract.contract_commencement_date || '--' }}
          </el-descriptions-item>
          <el-descriptions-item label="合同完工日期" v-if="$fieldShowFunc('xm_htwgrq')">
            <div class="justify_8" slot="label">合同完工日期</div>
            {{ dataObj.contract.contract_completion_date || '--' }}
          </el-descriptions-item>
          <el-descriptions-item label="合同工期" v-if="$fieldShowFunc('xm_htgq')">
            <div class="justify_8" slot="label">合同工期</div>
            {{ dataObj.contract.contract_duration_days ? dataObj.contract.contract_duration_days + '天' : '--' }}
          </el-descriptions-item>
          <el-descriptions-item label="合同签约金额" v-if="$fieldShowFunc('xm_htqyje')">
            <div class="justify_8" slot="label">合同签约金额</div>
            {{ dataObj.contract.contract_price ? dataObj.contract.contract_price + '元' : '--' }}
          </el-descriptions-item>
          <el-descriptions-item label="签约报价比" v-if="$fieldShowFunc('xm_qybjb')">
            <div class="justify_8" slot="label">签约报价比</div>
            {{ dataObj.contract.contract_quotation_ratio ? dataObj.contract.contract_quotation_ratio + '%' : '--' }}
          </el-descriptions-item>
          <el-descriptions-item label="签约利润率" v-if="$fieldShowFunc('xm_qylrl')">
            <div class="justify_8" slot="label">签约利润率</div>
            {{ dataObj.contract.contract_profit_margin ? dataObj.contract.contract_profit_margin.toFixed(2) + '%' : '--'
            }}
          </el-descriptions-item>
          <el-descriptions-item label="签约备注" v-if="$fieldShowFunc('xm_qybz')">
            <div class="justify_8" slot="label">签约备注</div>
            {{ dataObj.contract.remark || '--' }}
          </el-descriptions-item>
          <el-descriptions-item labelClassName="descriptions_opacity" contentClassName="descriptions_opacity"
            v-for="key in $fieldRowFunc(0, 1, 5)" :key="key"></el-descriptions-item>
        </el-descriptions>

        <div class="user-title-box" ref="6" v-if="$fieldShowFunc('12-sgxx')">施工信息
          <el-button class="default-btn" type="primary" @click="constructionFunc"
            v-if="$isPer(permission, ['projectDetail_Looksg'])">查看施工</el-button>
        </div>
        <el-descriptions class="margin-bottom" :column="3" border>
          <el-descriptions-item label="施工进度" v-if="$fieldShowFunc('xm_sgjd')">
            <div class="justify_8" slot="label">施工进度</div>
            <span
              v-if="dataObj.construction.construction_status == 42 || dataObj.construction.construction_status == 40">待进场</span>
            <span v-if="dataObj.construction.construction_status == 45">施工中</span>
            <span v-if="dataObj.construction.construction_status == 50">已完工</span>
            <span v-if="dataObj.construction.construction_status == 60">质保中</span>
            <span v-if="dataObj.construction.construction_status == 70">质保到期</span>
          </el-descriptions-item>
          <el-descriptions-item label="验收进度" v-if="$fieldShowFunc('xm_ysjd')">
            <div class="justify_8" slot="label">验收进度</div>
            {{ dataObj.construction.acceptance_progress || '--' }}
          </el-descriptions-item>
          <el-descriptions-item label="实际开工日期" v-if="$fieldShowFunc('xm_sjkgrq')">
            <div class="justify_8" slot="label">实际开工日期</div>
            {{ dataObj.construction.on_site_start_date || '--' }}
          </el-descriptions-item>
          <el-descriptions-item label="实际完工日期" v-if="$fieldShowFunc('xm_sjwgrq')">
            <div class="justify_8" slot="label">实际完工日期</div>
            {{ dataObj.construction.actual_completion_date || '--' }}
          </el-descriptions-item>
          <el-descriptions-item label="当前/实际工期" v-if="$fieldShowFunc('xm_dqsjgq')">
            <div class="justify_8" slot="label">当前/实际工期</div>
            {{ dataObj.construction.construction_period ? dataObj.construction.construction_period + '天' : '--' }}
          </el-descriptions-item>
          <el-descriptions-item label="收尾完成时间" v-if="$fieldShowFunc('xm_swwcsj')">
            <div class="justify_8" slot="label">收尾完成时间</div>
            {{ dataObj.construction.closeout_complete_date ? dataObj.construction.closeout_complete_date : '--' }}
          </el-descriptions-item>
          <el-descriptions-item label="风险标签" v-if="$fieldShowFunc('xm_fxbq')">
            <div class="justify_8" slot="label">风险标签</div>
            {{ dataObj.construction.risk_label || '--' }}
          </el-descriptions-item>
          <el-descriptions-item label="已整改" v-if="$fieldShowFunc('xm_yzg')">
            <div class="justify_8" slot="label">已整改</div>
            <span v-if="$isPer(permission, ['projectDetail_zgdList'])"
              :class="dataObj.construction.rectified ? 'click-color' : ''" @click="rectifiedFunc(30)">{{
                dataObj.construction.rectified + '项'
              }}</span>
            <span v-else>{{ dataObj.construction.rectified + '项' }}</span>
          </el-descriptions-item>
          <el-descriptions-item label="未整改" v-if="$fieldShowFunc('xm_wzg')">
            <div class="justify_8" slot="label">未整改</div>
            <span v-if="$isPer(permission, ['projectDetail_zgdList'])"
              :class="dataObj.construction.not_rectified ? 'click-color' : ''" @click="rectifiedFunc(40)">{{
                dataObj.construction.not_rectified + '项' }}</span>
            <span v-else>{{ dataObj.construction.not_rectified + '项' }}</span>
          </el-descriptions-item>
          <el-descriptions-item label="项目质量评分" v-if="$fieldShowFunc('xm_xmzlpf')">
            <div class="justify_8" slot="label">项目质量评分</div>
            {{ dataObj.construction.project_quality_rating ? dataObj.construction.project_quality_rating + '分' : '--' }}
          </el-descriptions-item>
          <el-descriptions-item labelClassName="descriptions_opacity" contentClassName="descriptions_opacity"
            v-for="key in $fieldRowFunc(0, 1, 6)" :key="key"></el-descriptions-item>
        </el-descriptions>

        <div class="user-title-box" ref="7" v-if="$fieldShowFunc('12-jsxx')">结算信息
        </div>
        <el-descriptions class="margin-bottom" :column="3" border>
          <el-descriptions-item label="结算编号" v-if="$fieldShowFunc('xm_jsbh')">
            <div class="justify_8" slot="label">结算编号</div>
            <el-button type="text"
              v-if="dataObj.settlement.settlement_number && $isPer(permission, ['loock_settingLog'])"
              @click="settlementFunc">{{
                dataObj.settlement.settlement_number || '--' }}</el-button>
            <span v-else>
              {{ dataObj.settlement.settlement_number || '--' }}
            </span>
          </el-descriptions-item>
          <el-descriptions-item label="出具结算单时间" v-if="$fieldShowFunc('xm_cjjsdsj')">
            <div class="justify_8" slot="label">出具结算单时间</div>
            {{ dataObj.settlement.settlement_start_date || '--' }}
          </el-descriptions-item>
          <el-descriptions-item label="应结算金额" v-if="$fieldShowFunc('xm_yjsje')">
            <div class="justify_8" slot="label">应结算金额</div>
            {{ dataObj.settlement.settlement_amount ? dataObj.settlement.settlement_amount + '元' : '--' }}
          </el-descriptions-item>
          <el-descriptions-item label="实际结算金额" v-if="$fieldShowFunc('xm_sjjsje')">
            <div class="justify_8" slot="label">实际结算金额</div>
            {{ dataObj.settlement.final_settlement_amount ? dataObj.settlement.final_settlement_amount + '元' : '--' }}
          </el-descriptions-item>
          <el-descriptions-item label="结算优惠金额" v-if="$fieldShowFunc('xm_jsyhje')">
            <div class="justify_8" slot="label">结算优惠金额</div>
            {{ dataObj.settlement.settlement_discount_amount ? dataObj.settlement.settlement_discount_amount + '元' :
              '--' }}
          </el-descriptions-item>
          <el-descriptions-item label="结算完成时间" v-if="$fieldShowFunc('xm_jswcsj')">
            <div class="justify_8" slot="label">结算完成时间</div>
            {{ dataObj.settlement.settlement_completion_date || '--' }}
          </el-descriptions-item>
          <el-descriptions-item label="结算时效" v-if="$fieldShowFunc('xm_jssx')">
            <div class="justify_8" slot="label">结算时效</div>
            {{ dataObj.settlement.settlement_validity ? dataObj.settlement.settlement_validity + '天' : '--' }}
          </el-descriptions-item>
          <el-descriptions-item label="结算备注" v-if="$fieldShowFunc('xm_jsbz')">
            <div class="justify_8" slot="label">结算备注</div>
            {{ dataObj.settlement.settlement_remark || '--' }}
          </el-descriptions-item>
          <el-descriptions-item label="项目已收款" v-if="$fieldShowFunc('xm_xmysk')">
            <div class="justify_8" slot="label">项目已收款</div>
            <el-button @click="paidAmountFunc" type="text"
              v-if="dataObj.settlement.paid_amount && $isPer(permission, ['loock_payLog'])">{{
                dataObj.settlement.paid_amount + '元' }}</el-button>
            <span v-else>{{ dataObj.settlement.paid_amount + '元' }}</span>
          </el-descriptions-item>
          <el-descriptions-item label="项目未收款" v-if="$fieldShowFunc('xm_xmwsk')">
            <div class="justify_8" slot="label">项目未收款</div>
            {{ dataObj.settlement.unpaid_amount + '元' }}
          </el-descriptions-item>
          <el-descriptions-item labelClassName="descriptions_opacity" contentClassName="descriptions_opacity"
            v-for="key in $fieldRowFunc(0, 1, 7)" :key="key"></el-descriptions-item>
        </el-descriptions>

        <div class="user-title-box" ref="8" v-if="$fieldShowFunc('12-shxx')">售后信息</div>
        <el-descriptions class="margin-bottom" :column="3" border>
          <el-descriptions-item label="售后截止日期" v-if="$fieldShowFunc('xm_shjzrq')">
            <div class="justify_8" slot="label">售后截止日期</div>
            {{ dataObj.after_sales.warranty_deadline_date || '--' }}
            <el-button type="text"
              v-if="dataObj.after_sales.warranty_deadline_date && $isPer(permission, ['change_after_time'])"
              @click="changeShTimeFunc">修改</el-button>
          </el-descriptions-item>
          <el-descriptions-item label="是否质保期内" v-if="$fieldShowFunc('xm_sfzzbqn')">
            <div class="justify_8" slot="label">是否质保期内</div>
            {{ dataObj.basic_information.status >= 1150 ? dataObj.after_sales.is_sell_by == 1 ? '是' : '否' : '--' }}
          </el-descriptions-item>
          <el-descriptions-item label="售后已完成" v-if="$fieldShowFunc('xm_shywc')">
            <div class="justify_8" slot="label">售后已完成</div>
            <span v-if="$isPer(permission, ['projectDetail_shList'])"
              :class="dataObj.after_sales.completed ? 'click-color' : ''" @click="afterSalesFunc(3)">{{
                dataObj.after_sales.completed }}次</span>
            <span v-else>{{ dataObj.after_sales.completed }}次</span>
          </el-descriptions-item>
          <el-descriptions-item label="售后未完成" v-if="$fieldShowFunc('xm_shwwc')">
            <div class="justify_8" slot="label">售后未完成</div>
            <span v-if="$isPer(permission, ['projectDetail_shList'])"
              :class="dataObj.after_sales.not_finished ? 'click-color' : ''" @click="afterSalesFunc(1)">{{
                dataObj.after_sales.not_finished }}次</span>
            <span v-else>{{ dataObj.after_sales.not_finished }}次</span>
          </el-descriptions-item>
          <el-descriptions-item labelClassName="descriptions_opacity" contentClassName="descriptions_opacity"
            v-for="key in $fieldRowFunc(0, 1, 8)" :key="key"></el-descriptions-item>
        </el-descriptions>

      </div>
    </div>
    <!-- 历史记录 -->
    <!-- 项目历史记录 -->
    <projectLogCom :fieldList="fieldList" :logLoaidng="logLoaidng" @tabClick="tabClick" :activeName="activeHis"
      :addDialogVisible="hisDrawer" :log_list="logList" @close="hisDrawer = false">
    </projectLogCom>
    <!-- 修改售后截止日期 -->
    <el-dialog :modal-append-to-body="false" :close-on-click-modal="false" title="修改售后截止日期"
      :visible.sync="changeDateVisible" width="500px">
      <el-form :model="changeDateForm">
        <el-form-item label="售后截止日期">
          <el-date-picker style="width: 100%;" value-format="yyyy-MM-dd" v-model="changeDateForm.date" type="date"
            placeholder="选择日期">
          </el-date-picker>
        </el-form-item>
      </el-form>
      <span slot="footer" class="dialog-footer">
        <el-button type="primary" @click="changeShTimeSubmitFunc">提交</el-button>
        <el-button @click="changeShTimeCloseFunc">关闭</el-button>
      </span>
    </el-dialog>
  </div>
</template>
<script>
import saleApi from '@/api/saleApi';
import projectApi from '@/api/projectApi';
import projectLogCom from "@/components/projectPopu/projectLogCom/index";
export default {
  name: 'projectDetailNew',
  components: {
    projectLogCom
  },
  data() {
    return {
      //修改售后截止日期
      changeDateForm: {
        date: ''
      },
      changeDateVisible: false,
      // 历史
      activeHis: "0", //日志类型
      logLoaidng: false,
      logList: [],
      hisDrawer: false,
      fieldList: {},


      activeName: "1",
      dataObj: '',
      showImg: false,
      permission: [],
      LOG_STATUS_LIST: [100, 110, 120, 130, 140, 180, 200, 240, 250, 280, 310, 340, 362, 366, 370, 460, 450, 480, 410, 413, 415, 420, 440]
    };
  },
  computed: {

  },
  activated() {
    this.saleProjectDetails();
  },
  mounted() {
    // 操作权限
    this.$getHtmlAuthority('/projectManagement').then(res => {
      console.log(res, "getHtmlAuthority");
      this.permission = res.data.permission;
    })
    this.saleProjectDetails();
  },
  methods: {
    // 查看项目已收款 跳转到财务
    paidAmountFunc() {
      this.$store.commit('isEventTriggeredFunc', true);
      this.$router.push({
        path: 'collectionPaymentManagement',
        query: {
          project_name: this.dataObj.basic_information.project_name,
          review_status: 2
        }
      })
    },
    // 修改售后日期
    changeShTimeSubmitFunc() {
      if (!this.changeDateForm.date) {
        this.$message.warning("请选择售后截止日期");
        return;
      }
      if (this.dataObj.after_sales.warranty_deadline_date === this.changeDateForm.date) {
        this.$message.warning("日期未修改，无需提交");
        return;
      }
      saleApi.updWarrantyDate({
        project_id: this.$route.query.id || this.dataObj.id,
        warranty_deadline_date: this.changeDateForm.date
      }).then(res => {
        if (res.code == 200) {
          this.$message.success("修改成功");
          this.changeDateVisible = false;
          this.saleProjectDetails();
        } else {
          this.$message.warning(res.message);
        }
      })
    },
    changeShTimeCloseFunc() {
      this.changeDateVisible = false;
    },
    changeShTimeFunc() {
      this.changeDateForm.date = JSON.parse(JSON.stringify(this.dataObj.after_sales.warranty_deadline_date));
      this.changeDateVisible = true;
    },
    // 历史记录
    // 项目历史记录
    projectHisFunc() {
      this.hisDrawer = true;
      this.getProjectLog();
    },
    // 项目日志类型切换
    tabClick(type) {
      if (this.logLoaidng) return;
      this.activeHis = type;
      this.getProjectLog();
    },
    // 获取项目日志
    getProjectLog() {
      this.logList = [];
      this.logLoaidng = true;
      // getProjectLogNew
      // getProjectLogList
      projectApi
        .getProjectLogNew({
          project_id: this.$route.query.id || this.dataObj.id,
          log_status: this.LOG_STATUS_LIST
        })
        .then((res) => {
          console.log(res, "项目日志");
          this.logLoaidng = false;
          if (res.code == 200) {
            res.data.forEach((item) => {
              if (item.form_data) {
                try {
                  item.form_data = JSON.parse(item.form_data);
                } catch (error) {
                  console.error('解析日志数据失败:', error, item);
                  item.form_data = {}; // 设置默认值避免页面崩溃
                }
              }
            });
            this.logList = res.data;
          }
        })
        .catch((err) => {
          this.logLoaidng = false;
        });
    },


    // 查看增减项
    changeItemFunc() {
      this.$store.commit('isEventTriggeredFunc', true);
      this.$router.push({
        path: '/increaseDecreaseItemsList',
        query: {
          project_name: this.dataObj.basic_information.project_name,
        }
      })
    },
    // 查看售后信息
    afterSalesFunc(after_status) {
      this.$store.commit('isEventTriggeredFunc', true);
      this.$router.push({
        path: '/afterSalesManagement',
        query: {
          project_name: this.dataObj.basic_information.project_name,
          after_status
        }
      })
    },
    // 查看结算信息
    settlementFunc() {
      this.$store.commit('isEventTriggeredFunc', true);
      this.$router.push({
        path: '/settlemenDetailPage',
        query: {
          id: this.$route.query.id,
        }
      })
    },
    // 查看整改单
    rectifiedFunc(rectification_status) {
      this.$store.commit('isEventTriggeredFunc', true);
      this.$router.push({
        path: '/rectificationForm',
        query: {
          project_name: this.dataObj.basic_information.project_name,
          rectification_status
        }
      })
    },
    // 查看施工信息
    constructionFunc() {
      this.$store.commit('isEventTriggeredFunc', true);
      this.$router.push({
        path: '/qualityAcceptance',
        query: {
          project_name: this.dataObj.basic_information.project_name,
        }
      })
    },
    // 查看合同信息
    contractFunc(id) {
      this.$store.commit('isEventTriggeredFunc', true);
      this.$router.push({
        path: '/contractDetailPage',
        query: {
          id,
          type: 1
        }
      })
    },
    // 查看报价信息
    quotationFunc() {
      this.$store.commit('isEventTriggeredFunc', true);
      this.$router.push({
        path: '/budgetDetailPage',
        query: {
          id: this.$route.query.id
        }
      })
    },
    // 查看客户信息
    customerFunc(id) {
      this.$store.commit('isEventTriggeredFunc', true);
      this.$router.push({
        path: '/customerDetailNewPage',
        query: {
          id
        }
      })
    },
    // 去创建合同
    addContractFunc() {
      this.$store.commit('isEventTriggeredFunc', true);
      this.$router.push({
        path: '/addContract'
      })
    },
    scrollTo() {
      const element = this.$refs[this.activeName];
      if (element) {
        element.scrollIntoView({ behavior: 'smooth' });
      }
    },
    saleProjectDetails() {
      if (!this.$route.query.id) return;
      saleApi.saleProjectDetails({
        project_id: this.$route.query.id
      }).then(res => {
        console.log(res, "项目详情")
        if (res.code == 200) {
          res.data.contract.contract_quotation_ratio = res.data.contract.contract_quotation_ratio ? res.data.contract.contract_quotation_ratio.toFixed(2) : 0;
          this.dataObj = res.data;
        }
      })
    },
  },
};
</script>
<style lang="scss" scoped>
@import "./index.scss";
@import '@/styles/detail.scss';
</style>
<style lang="scss">
.contentClassName {
  opacity: 0 !important;
  display: none !important;
}

.labelClassName {
  opacity: 0 !important;
  display: none !important;
}
</style>